<!--
* @name: 菜单管理
* @date: 2022-09-09
-->
<template>
  <div style="display: flex;height: 100%;">
    <base-layout title="菜单管理" :operateButtonSwitch="false" style="width: 260px;">
      <div slot="main" flex style="height:100%">
        <div style="width: 100%;border-right:1px solid #dfe6ec;height:100%;overflow: auto;">
          <base-tree ref="baseTree" :isCenter="false" :isSaveBtn="false" :Allshow="false" :expandAll="true"
                     :showCheckbox="false" :menuData="menuData" @handleNodeClick="formClick">
          </base-tree>
        </div>

      </div>
    </base-layout>
    <base-layout title="菜单树编辑区" :defaultButtonSwitch="false" :buttonList="buttonList" @onFuncBtn="getFuncBtn"
                 style="flex:1;">
      <div slot="main" style="padding:0 12px;height:300px">
        <base-form ref="customForm" :formRow="formRow" :isFunBtn="isFunBtn" @elDialogClick="elDialogClick"
                   :formdata="ruleForm" @onSubmit="getSubmit">
        </base-form>
      </div>
    </base-layout>
    <base-organization ref="baseOrganization" :menuData="menuData" @handleConfirmClick="handleConfirmClick">
    </base-organization>
  </div>
</template>

<script>
import router from '@/router'
import baseLayout from "@/components/base/baseLayout"
import baseForm from "@/components/base/baseNewForm/index.vue"
import baseTree from "@/components/base/BaseMenuTree/index.vue"
import baseTreeclick from "@/components/base/baseTreeClick/index.vue"
import baseDialog from "@/components/base/BaseNewDialog"
import baseOrganization from "@/components/base/baseOrganization"
import configData from "./configData";
import {
  GetOrganTree,
} from '@/api/apis/organization'
import {
  GetMenuTree,
  GetBillData,
  MenuSaveData,
  MenuDelData
} from '@/api/apis/menuManage'
import { authApi } from '@/api/apis/auth'
export default {
  components: {
    baseLayout,
    baseTree,
    baseForm,
    baseTreeclick,
    baseDialog,
    baseOrganization
  },
  data() {
    return {
      // treeHight: '350',
      dialogVisible: false,
      dialogTitle: '选择上级菜单',
      leftTitle: '菜单树',
      rightTitle: '菜单及上级菜单',
      mainColor: '#f8f8f8 ',
      buttonList: [{
        menuName: '新增根节点',
        icon: 'el-icon-plus'
      },
        {
          menuName: '新增子节点',
          icon: 'el-icon-plus'
        },
        {
          menuName: '删除节点',
          icon: 'el-icon-delete',
          type: 'danger'
        },
      ],
      delId: '',
      menuData: [],
      ruleForm: {},
      rules: {},
      formRow: configData.formRow,
      isFunBtn: true,

    }
  },
  mounted() {
    // this.$refs.baseTree.getMenuList()
    this.initPage()
  },
  methods: {
    //页面初始化
    initPage() {
      // this.delId = ""
      this.getMenuData()
    },
    // 获得树状图
    async getMenuData() {
      let res = await authApi('sysMenuConfigService','','queryEntityTree','',{})
      if (res.status == 200) {
        let arr = res.attribute[0]
        this.menuData = res.attribute
      }
    },
    // 操作按钮事件
    getFuncBtn(btnEven) {
      if (!this.delId) {
        this.$vmNews('请选择处理的信息')
        return
      }
      if (btnEven.menuName == '新增根节点') {
        let newRuleForm = {
          parentMenuName: "",
          parentMenuId: 0,
        }
        this.$nextTick(() => {
          this.$refs.customForm.resetForm('ruleForm')
          this.$refs.customForm.choiceAssignment(newRuleForm)
        })
      }
      if (btnEven.menuName == '新增子节点') {
        let newRuleForm = {
          parentMenuName: this.ruleForm.menuName,
          parentMenuId: this.ruleForm.id
        }
        console.log(newRuleForm,'newRuleForm')
        this.$nextTick(() => {
          this.$refs.customForm.resetForm('ruleForm')
          this.$refs.customForm.choiceAssignment(newRuleForm)
        })
      }
      if (btnEven.menuName == '删除节点') {

        this.$confirm('确认删除该菜单吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.menuDel()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    async menuDel() {
      let params = {
        id: this.delId
      }
      let res = await authApi('sysMenuConfigService','','deleteEntity','',params)
      if (res.status == 200) {
        this.$vmNews('删除成功', 'success')
        this.ruleForm = {}
        this.getMenuData()
        this.$refs.customForm.choiceAssignment({})
      }
    },
    // 获取详情
    async getDetail(id) {
      let params = {
        id: id
      }
      let res = await authApi('sysMenuConfigService','','getEntity','',params)
      if (res.status == 200) {
        console.log(res,'res')
        this.ruleForm = res.attribute
        this.$nextTick(() => {
          this.$refs.customForm.choiceAssignment(res.attribute)
        })
      }
    },
    async getSubmit(data) {
      let params = {
        ...data
      }
      let res
      if(params.id){
        res = await authApi("sysMenuConfigService","","updateEntity","",params)
      }else{
        res = await authApi("sysMenuConfigService","","saveEntity","",params)
      }
      if (res.status == 200) {
        this.$vmNews('保存成功', 'success')
        this.ruleForm = {}
        this.getMenuData()
        this.$refs.customForm.choiceAssignment({})
        this.$store.dispatch('GenerateRoutes').then(accessRoutes => {
          // 根据roles权限生成可访问的路由表
          for (let i = 0, length = accessRoutes.length; i < length; i += 1) {
            const element = accessRoutes[i]
            router.addRoutes(accessRoutes) // 动态添加可访问路由表
          }
          localStorage.setItem('routeList', JSON.stringify(accessRoutes))
        })
      }
    },
    //父节点点击事件
    elDialogClick(row, index, indexRow) {
      this.$refs.baseOrganization.dialogVisible = true
    },
    handleConfirmClick(val) {
      console.log(val, "val");
      this.ruleForm.parentMenuName = val.label
      this.ruleForm.parentMenuId = val.id
      this.$refs.customForm.incomingParameters(this.ruleForm)
      this.$refs.baseOrganization.dialogVisible = false
    },
    formClick(data) {
      this.delId = data.id
      this.getDetail(data.id)
    },
  },
}
</script>

<style scoped>
.organizationBody {
  display: flex;
  justify-content: space-evenly;
  background-color: #f2f3f4;
  padding: 10px;
  max-height: 400px;
  overflow: auto;
}

.container {
  height: auto;
}

/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

/deep/ input[type="number"] {
  -moz-appearance: textfield !important;
}
</style>
